import React, { useState } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
const Home = React.lazy(() => import('./pages/Home/Home'))
const Recommand = React.lazy(() => import('./pages/Recommand/Recommand'))
const HomeRecommand = React.lazy(() => import('./pages/HomeRecommand/HomeRecommand'))
function App() {
  const route = [
    {
      path: "home",
      element: Home,
      children: [
        {
          path: "recommand", element: Recommand,
          children: [{ path: "homerecommand", element: HomeRecommand, }]
        }]
    },
  ]

  function routes(arr) {
    return arr.map(item =>
      <Route key={item.path} path={item.path} element={<item.element />}>
        {item.children ? routes(item.children) : null}
      </Route>
    )
  }
  return (
    <React.Suspense fallback='加载中'>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Navigate to='home/recommand/homerecommand' />}></Route>
          {routes(route)}
        </Routes>
      </BrowserRouter>
    </React.Suspense>

  )
}

export default App
